<template>
	<view :style="goodstyle">
		
		<view class="swiper decorate" :style="'height:' + height + 'px;'">
			<swiper @change="changesilde" :indicator-dots="false" :style="'height:' + height + 'px;'" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(item, i) in mydata.imglist" :key="i">
						<vcustomer  :linkdata="item.linkdata">
								<view class="" :style="'height:' + height + 'px;width:'+imgwidth+'rpx'">
									<vimage class="img_box"   :imgstyle="itemstyle" :src="item.url" v-if="item.url"></vimage>
									
								</view>						
						</vcustomer>					
				</swiper-item>
			</swiper>
			<view>
				<view v-if="mydata.type == 1" class="dots rectangle" :style="'justify-content:' + mydata.position">
					<view v-for="(item, i) in mydata.imglist" :key="i" :class="activeIndex == i ? 'dot active' : 'dot'" :style="'background:' + mydata.bg"></view>
				</view>
				<view v-if="mydata.type == 2" class="dots round" :style="'justify-content:' + mydata.position">
					<view v-for="(item, i) in mydata.imglist" :key="i" :class="activeIndex == i ? 'dot active' : 'dot'" :style="'background:' + mydata.bg"></view>
				</view>
				<text v-if="mydata.type == 3" :class="'number ' + mydata.position">{{ activeIndex + 1 }}/{{ mydata.imglist.length }}</text>
			</view>
		</view>
	</view>
</template>

<script>
	import util from '@/common/util.js'
	import {mapState, mapMutations} from 'vuex';
	import base from '@/common/baseUrl.js'
export default {
	props: {
		mydata: {
			type: Object,
			default: {}
		}
	},
	data() {
		return {
			activeIndex: 0,
			height: 0,
			baseUrl:base.baseUrl
		};
	},
	created() {
		let _this = this;
		this.getjuris('ossConfig').then(a=>{
			if(_this.mydata.imglist[0].url.indexOf('http')==-1){
				var url=util.getimgurl(_this.mydata.imglist[0].url)
			}
			if(url){
			uni.getImageInfo({
				src: url,
				success: function(image) {
					let e=_this.SystemInfo.windowWidth/375
					let windowWidth=_this.SystemInfo.windowWidth*e
					
					let myheight = (windowWidth - _this.mydata.p_lr*e) / image.width * image.height;
		
					// ((375 - _this.data.p_lr) / width) * height;
					_this.height =myheight
				},fail(e) {
					_this.height = 375
				}
			});		
			}
			
		})
	
	
	
	},
	computed: {
		imgwidth(){
			return 750 - this.mydata.p_lr*2
		},
		itemstyle() {
			return 'border-radius:' + this.mydata.r_t + 'rpx ' + this.mydata.r_t + 'rpx ' + this.mydata.r_b + 'rpx ' + this.mydata.r_b + 'rpx ';
		},
		goodstyle() {
			var bg = '';
			if (this.mydata.bg_type == 1) {
			  bg = 'background:' + this.mydata.bg_color;
			} else if (this.mydata.bg_type == 2) {
			if(this.mydata.bg_img.indexOf('http')==-1){
				this.mydata.bg_img=util.getimgurl(this.mydata.bg_img)
			}
			  bg = 'background:url(' + this.mydata.bg_img + ');background-size: contain;background-repeat: no-repeat;';
			}
			
			return 'padding: ' + this.mydata.p_t + 'rpx ' + this.mydata.p_lr + 'rpx ' + this.mydata.p_b + 'rpx;'+bg;
		},
		...mapState({
		    SystemInfo:state => state.SystemInfo,
		})	
	},
	methods: {
		changesilde(e) {
			this.activeIndex = e.detail.current;
		},

	}
};
</script>
<style lang="scss" scoped>
.swiper {
	overflow: hidden;

	// image {
	// 	width: 100%;
	// 	display: block;
	// 	height: 100%;
	// }

	.dots {
		position: absolute;
		display: flex;
		bottom: 20rpx;
		box-sizing: border-box;
		padding: 0 28rpx;
		left: 0;
		right: 0;
		justify-content: center;
		z-index: 300;

		.dot {
			width: 12rpx;
			height: 12rpx;
			background: #fff;
			margin: 0 6rpx;
			opacity: 0.54;

			&.active {
				opacity: 1;
			}
		}

		&.round {
			.dot {
				border-radius: 50%;
			}
		}

		&.rectangle {
			.dot {
				width: 16rpx;
				height: 8rpx;
				border-radius: 8rpx;
				margin: 0 6rpx;
			}
		}
	}

	.number {
		position: absolute;
		display: flex;
		bottom: 20rpx;
		box-sizing: border-box;
		justify-content: center;
		color: #fff;
		background: rgba(0, 0, 0, 0.54);
		border-radius: 44rpx;
		flex-direction: column;
		flex-direction: column;
		text-align: center;
		width: fit-content;
		min-width: 60rpx;
		font-size: 18rpx;
		line-height: 18rpx;
		padding: 6rpx 10rpx;
		right: 24rpx;
		z-index: 1000;

		&.flex-start {
			left: 24rpx;
		}

		&.flex-end {
			right: 24rpx;
		}
	}
}
.swiper-item{
	width: 750rpx;
}
</style>
